<template>
  <div>About</div>
  <div class="state">
    所有的state展示
    <br />
    <span>展示rootCount ： {{ $store.state.rootCount }}</span>
    <br />
    <span>展示homeCount ： {{ $store.state.home.homeCount }}</span>
    <br />
    <span>展示aboutCount ： {{ aboutCount }}</span>
  </div>
  <div class="state">
    所有的getters展示
    <br />
    <span>展示rootGetter ： {{ $store.getters.rootCountGet }}</span>
    <br />
    <span>展示homeGetter ： {{ $store.getters['home/homeCountGet'] }}</span>
    <br />
    <span>展示aboutGetter ： {{ aboutGET }}</span>
  </div>
  <div class="state">
    使用commit 其他的mutattions
    <br />
    <button @click="$store.commit('increment')">修改rootCount</button>
    <br />
    <button @click="$store.commit('home/decrement')">修改homeCount</button>
    <br />
    <button @click="changeAboutCount">修改aboutCount</button>
  </div>
  <div class="state">
    派发action
    <br />
    <button @click="$store.dispatch('incrementAction')">派发root中的incrementAction</button>
    <br />
    <button @click="$store.dispatch('home/decrementAction')">修改home中的decrementAction</button>
    <br />
    <button @click="changeAboutAction">修改about中的incrementAction</button>
  </div>
</template>

<script>
import useMapStatetoSetup from '../hooks/useMapStatetoSetup'
import useMapGetterToSetup from '../hooks/useMapGetterToSetup'
import useMapMutationstoSetup from '../hooks/useMapMutationstoSetup'
import useMapActionstoSetup from '../hooks/useMapActionstoSetup'
export default {
  setup() {
    const { aboutCount } = useMapStatetoSetup({
      aboutCount: state => state.about.aboutCount,
    })
    const { aboutGET } = useMapGetterToSetup({
      aboutGET: 'about/aboutCountGet',
    })
    const { changeAboutCount } = useMapMutationstoSetup({
      changeAboutCount: 'about/increment',
    })
    const { changeAboutAction } = useMapActionstoSetup({
      changeAboutAction: 'about/incrementAction',
    })
    return {
      aboutCount,
      aboutGET,
      changeAboutCount,
      changeAboutAction,
    }
  },
}
</script>

<style scoped>
.state {
  border: 1px solid #ccc;
  background-color: rgba(19, 97, 51);
  color: #ccc;
  padding: 5px;
}
</style>
